<!DOCTYPE html>
<#assign base=springMacroRequestContext.getContextUrl("")>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/map/css/icon.css">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/map/css/layui.css">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/map/css/jquery.contextMenu.css">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/map/css/Map_CH.css">

    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/easyui/themes/metrole/easyui.css">

    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        table.imagetable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #999999;
            border-collapse: collapse;
            width: 100%;
        }
        table.imagetable th {
            background:#b5cfd2;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
            width: 30%;
        }
        table.imagetable td {
            background:#dcddc0;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }
        .button_light {
            background-color: #008CBA;
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor:pointer;
        }

        .button_remove {
            background-color: #AAAAAA;
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor:pointer;
        }



        .BMap_cpyCtrl{display:none !important;}
        .anchorBL a img{display:none !important;}

        /*地图标题 infoWindow*/
        .BMap_bubble_title{
            color:#fff;
            font-size:14px;
            font-weight: bold;
            text-align:left;
            background:transparent !important;
        }

        .BMap_pop .BMap_top{
            background:rgba(0, 125, 196,.8) !important;
            border:0 !important;
        }
        .BMap_pop .BMap_center{
            border:0 !important;
            background:rgba(0, 125, 196,.8) !important;
        }
        .BMap_pop .BMap_bottom{
            border:0 !important;
            background:rgba(0, 125, 196,.8) !important;
        }
        .BMap_pop div:nth-child(3){
            background:transparent !important;
        }
        .BMap_pop div:nth-child(3) div{
            border-radius:7px;
            background:rgba(0, 125, 196,.8) !important;
            border:0 !important;
        }
        .BMap_pop div:nth-child(1){
            border-radius:7px 0 0 0;
            background:transparent !important;
            border:0 !important;
        }
        .BMap_pop div:nth-child(1) div{
            background:rgba(0, 125, 196,.8) !important;
        }
        .BMap_pop div:nth-child(5){
            border-radius:0 0 0 7px;
            background:transparent !important;
            border:0 !important;
        }
        .BMap_pop div:nth-child(5) div{
            border-radius:7px;
            background:rgba(0, 125, 196,.8) !important;
        }
        .BMap_pop div:nth-child(7){
            background:transparent !important;
            left: 226px;
        }
        .BMap_pop div:nth-child(7) div{
            border-radius:7px;
            background:rgba(0, 125, 196,.8) !important;
        }
        /*替换关闭按钮*/
        img[src="http://api0.map.bdimg.com/images/iw_close1d3.gif"]{
            content: url('${base}/glrStatic/images/close.png');
        }
        img[src="https://api.map.baidu.com/images/iw_close1d3.gif"]{
            content: url('${base}/glrStatic/images/close.png');
        }
        /*替换剪头*/
        img[src="http://api0.map.bdimg.com/images/iw3.png"]{
            opacity:.7;
            margin-top: -692px !important;
            filter:alpha(opacity=70);
            content: url('${base}/glrStatic/home/images/iw3.png');
        }
        img[src="https://api.map.baidu.com/images/iw3.png"]{
            opacity:.7;
            margin-top: -692px !important;
            filter:alpha(opacity=70);
            content: url('${base}/glrStatic/home/images/iw3.png');
        }
        #mapContent {
            border-left: 1px solid #e9e9e9;
            overflow: hidden;
            height: 100%;
            position: relative;
        }
        #code_area {
            width: 500px;
            -webkit-user-select: none;
            float: left;
            height: 100%;
            z-index: 999;
            position: relative;
            box-shadow: 3px 0px 6px rgba(0,0,0,0.1);
        }
        #content {
            position: absolute;
            width: 100%;
            border-bottom: 1px solid #ccc;
            top: 0;
            bottom: 0;
        }



        .sContentinfo{
            height: 100%;
        }

        a.l-btn {
            border: 1px solid #ccc;
            border-radius: 3px;
            background-color: #ffffff;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff),
            to(#f2f2f2));
            background: -moz-gradient(linear, 0 0, 0 100%, from(#f7f7f7),
            to(#f2f2f2));
            background: -o-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
            background: -ms-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
            filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#f7f7f7,
            endcolorstr=#f2f2f2, gradientType=0);
            height: 24px;
            padding: 1px 2px;
            cursor: pointer;
            line-height: 23px;
            display: inline-block;
            color: #444;
            /* margin-right: 5px; */
            white-space: nowrap;
        }

    </style>
    <script type="text/javascript" src="${base}/glrStatic/viewOutline/jquery.1.10.2.min.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/viewOutline/ajax.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A982fc9194e26e983ef0dd40499e87e6"></script>

    <title>地图展示</title>

    <script type="text/javascript">

        var XAccessToken='${AccessToken}';
        function searchReset() {
            $("#content").find(":input").val("");
            $("#executeTime").val(today());
            map.clearOverlays();
        }

        function searchFilter() {
            map.clearOverlays();
            $.ajax({
                url:'getUserInfo?X-Access-Token='+XAccessToken,
                data:{equipmentSerial:$("#equipmentSerial").val(),userInfo:$("#userInfo").val(),executeTime:$("#executeTime").val(),score:$("#score").val()},
                async:false,
                success:function(data){
                    debugger;
                    //var d = $.parseJSON(data);
                    var d =data;
                    if (d.success) {
                        if (d.obj.length>0){
                            var point;
                            var infoWindow;
                            var pois = [];
                            for(var i=0;i<d.obj.length;i++){
                                var Lan=d.obj[i].lan;
                                var Lat=d.obj[i].lat;
                                var sysOrgCode=d.obj[i].sysOrgCode;  //"2019-09-20 10:34:31"
                                var userInfo=d.obj[i].userInfo;  //"liuby"
                                var sysCompanyCode=d.obj[i].sysCompanyCode;  //"/1212/hk__D59087135_20190920103431850_FACE_SNAP.jpg"


                                point = new BMap.Point(Lan,Lat);

                                pois.push(point);

                                map.panTo(point);

                                var  st11='用户';
                                var  st12='时间';

                                var sContent =
                                    "<div class='sContentinfo'>" +
                                        "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+st11+"："+userInfo+"</h4>" +
                                        "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+st12+"："+sysCompanyCode+"</h4>" +
                                        "<img style='float:left;margin:4px' id='imgDemo' src='"+sysOrgCode+"' width='139' height='104' title=''/>" +
                                    "</div>";
                                var marker = new BMap.Marker(point);
                                infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
                                map.addOverlay(marker);

                                addClickHandler(marker,infoWindow);


                                //marker.addEventListener("click", function(){
                                  //  this.openInfoWindow(infoWindow);
                                //});



                            }

                            if (d.obj.length>0){
                                map.openInfoWindow(infoWindow
                                    ,point); //开启信息窗口
                            }


                            var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                                scale: 0.6,//图标缩放大小
                                strokeColor:'#fff',//设置矢量图标的线填充颜色
                                strokeWeight: '2',//设置线宽
                            });
                            var icons = new BMap.IconSequence(sy, '10', '30');
                            var polyline =new BMap.Polyline(pois, {
                                enableEditing: false,//是否启用线编辑，默认为false
                                enableClicking: true,//是否响应点击事件，默认为true
                                icons:[icons],
                                strokeWeight:'8',//折线的宽度，以像素为单位
                                strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
                                strokeColor:"#18a45b" //折线颜色
                            });
                            map.addOverlay(polyline);          //增加折线
                        }else{
                            layer.msg('<t:mutiLang langKey="no.data"/>');
                        }
                    }else{
                        layer.msg('<t:mutiLang langKey="common.fail"/>');

                    }
                }
            });



        }



        var map ;
        $(document).ready(function(){
            // 百度地图API功能
            map= new BMap.Map("allmap");    // 创建Map实例
            //var point = new BMap.Point(116.331398,39.897445);
            var point = new BMap.Point(116.3997370277,39.9144632622);
            map.centerAndZoom(point,12);
            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            setMapEvent();
            addMapControl();
            //addGateWayMapOverlay();

            $("#executeTime").val(today());
        });

        function today(){
            var today=new Date();
            var h=today.getFullYear();
            var m=today.getMonth()+1;
            var d=today.getDate();
            m= m<10?"0"+m:m;
            d= d<10?"0"+d:d;
            return h+"-"+m+"-"+d;
        }




        var li_east=1;




        //添加地图事件
        function setMapEvent(){
            map.enableScrollWheelZoom();
            map.enableKeyboard();
            map.enableDragging();
            map.enableDoubleClickZoom();
            map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP,BMAP_SATELLITE_MAP ]}));
        }
        //向地图添加控件
        function addMapControl(){
            var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
            scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
            map.addControl(scaleControl);
        }

        //添加网关覆盖物
        function addGateWayMapOverlay(){
            var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                scale: 0.6,//图标缩放大小
                strokeColor:'#fff',//设置矢量图标的线填充颜色
                strokeWeight: '2',//设置线宽
            });

            var icons = new BMap.IconSequence(sy, '10', '30');
            // 创建polyline对象
            var pois = [
                new BMap.Point(117.2776618671,34.1890050385),
                new BMap.Point(117.2781702557,34.1186046928)
            ];
            var polyline =new BMap.Polyline(pois, {
                enableEditing: false,//是否启用线编辑，默认为false
                enableClicking: true,//是否响应点击事件，默认为true
                icons:[icons],
                strokeWeight:'8',//折线的宽度，以像素为单位
                strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
                strokeColor:"#18a45b" //折线颜色
            });
            map.addOverlay(polyline);          //增加折线



            var sContent =
                "<div class='sContentinfo'>" +
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>用户：xb</h4>" +
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>时间：2019-09-20 10:34:31</h4>" +
                "<img style='float:left;margin:4px' id='imgDemo' src='http://106.14.140.133/admin/1212/hk__D59087135_20190919150805731_FACE_SNAP.jpg' width='139' height='104' title='天安门'/>" +
                "</div>";
            var point = new BMap.Point(117.2776618671,34.1890050385);
            var marker = new BMap.Marker(point);
            var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
            map.addOverlay(marker);
            marker.addEventListener("click", function(){
                this.openInfoWindow(infoWindow);
                //图片加载完毕重绘infowindow
                document.getElementById('imgDemo').onload = function (){
                    infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                }
            });

            map.openInfoWindow(infoWindow
                ,point); //开启信息窗口

            var sContent01 =sContent;
            var point01 = new BMap.Point(117.2781702557,34.1186046928);
            var marker01= new BMap.Marker(point01);
            var infoWindow01 = new BMap.InfoWindow(sContent01);  // 创建信息窗口对象
            map.addOverlay(marker01);
            marker01.addEventListener("click", function(){
                this.openInfoWindow(infoWindow01);
                //图片加载完毕重绘infowindow
                document.getElementById('imgDemo01').onload = function (){
                    infoWindow01.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                }
            });


        }




        function addClickHandler(target,window){
            target.addEventListener("click",function(){
                target.openInfoWindow(window);
            });
        }
        var gatewayArr=new Array();
        //添加路灯覆盖物
        function addLightMapOverlay(){
            var gate_id=$("#gate_id").val();
            var datastr=gate_id.split(",");
            var gateWayCode=datastr[0];
            var new_point = new BMap.Point(datastr[1],datastr[2]);
            map.panTo(new_point);
            var markers=new Array();
            var userType='userInfo.userType';
            var lightstatus=new Array();
            var sContent = "";
            if(gatewayArr.indexOf(gateWayCode)!=-1){//如果不在存加载，存载不在去加载
                $.ajax({
                    url:'lightGisController.do?lightByGateWayCode?X-Access-Token='+XAccessToken,
                    data:{gateWayCode:gateWayCode},
                    success:function(data){
                        gatewayArr.push(gateWayCode);
                        var light=$.parseJSON(data);
                        console.info(light);
                        for(var i=0;i<light.length;i++)
                        {
                            sContent="<table class='imagetable'><tbody>"
                                +"<tr><th style='text-align:center'><t:mutiLang langKey='busi.lightmanage.ligcode'/></th><td>"+light[i].ligCode+"</td></tr>"
                                +"<tr><th style='text-align:center'><t:mutiLang langKey='busi.lightmanage.ligspecies'/></th><td>"+light[i].ligspeName+"</td></tr>"
                                +"<tr><th style='text-align:center'><t:mutiLang langKey='busi.lightmanage.road'/></th><td>"+light[i].gateWayCode+"</td></tr>"
                                +"<tr><th style='text-align:center'><t:mutiLang langKey='busi.lightmanage.currentvol'/></th><td>"+light[i].currentVol+"</td></tr>"
                                +"<tr><th style='text-align:center'><t:mutiLang langKey='busi.lightmanage.currentcur'/></th><td>"+light[i].currentCur+"</td></tr>"
                                +"<tr><th style='text-align:center'><t:mutiLang langKey='busi.lightmanage.currentbrightness'/></th><td>"+light[i].currentBrightness+"</td></tr>";
                                sContent=sContent+"<tr><th style='text-align:center'><t:mutiLang langKey='busi.gismanage.setbright'/></th><td><input type='number' id='brightSetId"+light[i].id+"' min='0' max='100' step='1'/></td></tr>"
                                    +"<tr><th style='text-align:center'><input type='button' class='button_light' onclick='lightPatternButtonClick(\""+light[i].id+"\",\""+light[i].ligCode+"\")' value='<t:mutiLang langKey='busi.pattern'/>'></button></th><td style='text-align:left'><input class='button_light' type='button' id='btn_light_"+light[i].id+"_"+gateWayCode+"' onclick='lightPatternSetting(\""+light[i].id+"\",\""+gateWayCode+"\",\""+light[i].ligCode+"\")' value='<t:mutiLang langKey='busi.setting'/>'></button><span id='span_light_"+light[i].id+"_"+gateWayCode+"'></span></td></tr>";
                            sContent=sContent+"</tbody></table>";
                            markers[i]={content:sContent,title:light[i].ligCode,imageOffset: {width:0,height:3},position:{lat:light[i].latitude,lng:light[i].longitude}};
                            lightstatus[i]=light[i].currentStatus;
                            var lightimg='plug-in/images/deng_gray.png';
                            if(lightstatus[i]=='N'){
                                lightimg='plug-in/images/deng_gray.png';
                            }else if(lightstatus[i]=='Y'){
                                lightimg='plug-in/images/deng_work.png';
                            }else if(lightstatus[i]=='K'){
                                lightimg='plug-in/images/deng_red.png';
                            }
                            var point = new BMap.Point(markers[i].position.lng,markers[i].position.lat);
                            var marker = new BMap.Marker(point,{icon:new BMap.Icon(lightimg,new BMap.Size(20,25),{
                                    imageOffset: new BMap.Size(markers[i].imageOffset.width,markers[i].imageOffset.height)
                                })});
                            var label = new BMap.Label(markers[i].title,{offset: new BMap.Size(25,5)});
                            var opts = {
                                width: 350,
                                title: markers[i].title,
                                enableMessage: false
                            };
                            var infoWindow = new BMap.InfoWindow(markers[i].content,opts);
                            marker.setLabel(label);
                            addClickHandler(marker,infoWindow);
                            map.addOverlay(marker);
                        }
                    }
                });
            }
        }

        function addClickHandler(target,window){
            target.addEventListener("click",function(){
                target.openInfoWindow(window);
            });
        }

        //路灯亮度设置
        var c=0;
        var t;
        var msg;
        function lightPatternSetting(lightId,gateWayCode,lightCode){
            c=10;
            var brightValue = $("#brightSetId"+lightId).val();
            if(brightValue!=null&&brightValue.trim()!=""){
                if(brightValue<0||brightValue>100){
                    tip('<t:mutiLang langKey="common.check.number"/>'+'(0~100)');
                    return;
                }
                msg=layer.msg('加载中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '50%', time:100000});
                $.ajax({
                    cache : false,
                    type : 'POST',
                    async:false,
                    data : {'lightId':lightId,"brightValue":brightValue,lightCode:lightCode},
                    url : 'tBPatternController.do?doAddLightToTempPattern',// 请求的action路径
                    error : function() {// 请求失败处理函数
                    },
                    success : function(data) {
                        var d = $.parseJSON(data);
                        if(d.success){
                            getMsg(gateWayCode,'GET_LED_MSG_ON_OFF');
                        }else{
                            layer.msg('<t:mutiLang langKey="common.wait.for.error"/>');
                        }
                    }
                });
            }else{
                tip('<t:mutiLang langKey="busi.gismanage.pleasesetbright"/>');
            }
        }
        function biaoshi(){
            if($("#biaoshi").css("display")=='none'){//如果show是隐藏的
                $("#biaoshi").css("display","block");//show的display属性设置为block（显示）
            }else{//如果show是显示的
                $("#biaoshi").css("display","none");//show的display属性设置为none（隐藏）
            }
        }
        //路段亮度设置
        function gataTempPatternSetting(gatewayCode){
            c=10;
            var brightValue = $("#brightSetId"+gatewayCode).val();
            if(brightValue!=null&&brightValue.trim()!=""){
                if(brightValue<0||brightValue>100){
                    tip('<t:mutiLang langKey="common.check.number"/>'+'(0~100)');
                    return;
                }
                msg=layer.msg('加载中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '50%', time:100000});
                $.ajax({
                    cache : false,
                    type : 'POST',
                    async:false,
                    data : {gatewayCode:gatewayCode,value:brightValue},
                    url : 'tBPatternController.do?setBrightnessRoadLamps',// 请求的action路径
                    error : function() {// 请求失败处理函数
                    },
                    success : function(data) {
                        var d = $.parseJSON(data);
                        if(d.success){
                            getMsg(gatewayCode,'GET_LED_MSG_ON_OFF');
                        }else{
                            layer.msg('<t:mutiLang langKey="common.wait.for.error"/>');
                        }
                    }
                });
            }else{
                tip('<t:mutiLang langKey="busi.gismanage.pleasesetbright"/>');
            }

        }
        function getMsg(gatewayCode,command)
        {
            if(c>0){
                $.ajax({
                    cache : false,
                    type : 'POST',
                    async:false,
                    data : {gatewayCode:gatewayCode,command:command},
                    url : 'tBGatewayController.do?getMsg?X-Access-Token='+XAccessToken,// 请求的action路径
                    error : function() {// 请求失败处理函数
                    },
                    success : function(data) {
                        var json = $.parseJSON(data);
                        if(json.attributes!=null&&json.attributes.code==0){
                            clearTimeout(t);
                            layer.close(msg);
                            if(command=='GET_LED_MSG_ON_OFF'){
                                layer.msg('操作成功');
                            }
                        }else{
                            t=setTimeout("getMsg('"+gatewayCode+"','"+command+"')",2000);
                        }
                    }
                });
            }else{
                layer.close(msg);
                layer.msg('获取失败');
                clearTimeout(t);
            }
            c=c-2;

        }

        //路段模式按钮点击弹出框
        function roadPatternButtonClick(id,gatewayCode,gatewayName){
            //createwindow('模式列表-网关'+gatewayName,'tBRoadController.do?gisroadPatternList&roadId='+id,null,null);
            openwindow('模式列表-网关'+gatewayName,"tBGatewayController.do?gatawayPatternList&gatewayType=selectWin&gatewayCode=" + gatewayCode+"&X-Access-Token="+XAccessToken,null,null);
        }
    </script>


</head>
<body>
<div id="content">
	<div style="width: 99%;text-align: center;height: 45px;margin-top: 12px;overflow: hidden;">
		所属设备：
		<input  type="text" name="equipmentSerial" id="equipmentSerial" style="width: 120px" class="inuptxt"/>
		用户：
		<input  type="text" name="userInfo" id="userInfo" style="width: 120px" class="inuptxt"/>
		识别率：
		<input  type="text" name="score" id="score" style="width: 120px" class="inuptxt"/>
		日期:
		<input id="executeTime" name="executeTime" readonly="readonly" type="text" maxlength="32" style="width: 150px" class="Wdate" onClick="WdatePicker()">

		<span style="float:right;">
			<a href="#" class="easyui-linkbutton l-btn" iconcls="icon-search" onclick="searchFilter()">
                <span class="l-btn-left icon-search"><span class="l-btn-text icon-search l-btn-icon-left">查询</span></span>
			</a>
			<a href="#" class="easyui-linkbutton l-btn" iconcls="icon-reload" onclick="searchReset()" id="">
				<span class="l-btn-left icon-reload"><span class="l-btn-text icon-reload l-btn-icon-left">重置</span></span>
			</a>
		</span>
	</div>
	<div id="mapContent" class="clearfix">
		<div id="allmap"></div>
	</div>
</div>
</body>
</html>
